<?php include THEMES_PATH.'public/before_body2.phtml';?>
<link href="/statics/front/css/article.css" rel="stylesheet">
</head>
<body>
<?php include THEMES_PATH.'public/header2.phtml';?>
<div class="heading">
  <strong><?php echo L('how_to_customize');?></strong>
</div>
<ul class="align-center tab-nav js-tab-nav">
  <li><a href="<?php echo url('quality');?>" rel="nofollow"><?php echo L('_new_quality_1');?></a></li>
  <li><a href="<?php echo url('delivery');?>" rel="nofollow"><?php echo L('_new_quality_2');?></a></li>
  <li><a href="<?php echo url('fitting');?>" rel="nofollow"><?php echo L('_new_quality_3');?></a></li>
  <li class="active"><?php echo L('_new_quality_4');?></li>
</ul>
<p class="clearfix main-width link-row">
  <a href="<?php echo url('/article/customize');?>" class="pull-left text-bold" rel="nofollow"><?php echo L('_new_quality_5');?></a>
  <a href="<?php echo url(CATEGORY_URL_2093);?>" class="pull-right text-bold"><?php echo L('_new_quality_6');?></a>
</p>
<div class="banner text-on-banner">
  <img src="/statics/front/images/article/banner-materials.jpg" alt="banner image">
  <p>
    <strong><?php echo L('_new_materials_1');?></strong>
    <span><?php echo L('_new_materials_2');?></span>
  </p>
</div>
<div class="clearfix main-width vertical-padding">
  <div class="pull-left column align-center">
    <img src="/statics/front/images/article/materials01.jpg" alt="materials image">
  </div>
  <div class="pull-right column">
    <dl class="article">
      <dt class="text-bold"><?php echo L('_new_materials_3');?></dt>
      <dd class="text"><?php echo L('_new_materials_4');?></dd>
    </dl>
    <dl class="article">
      <dt class="text-bold"><?php echo L('_new_materials_5');?></dt>
      <dd class="text"><?php echo L('_new_materials_6');?></dd>
    </dl>
  </div>
</div>
<div class="vertical-padding" style="background-color:#f5f6f6;">
  <div id="animation" class="clearfix main-width" style="position:relative;">
    <ul class="slides">
      <li>
        <div class="pull-left column align-center">
          <img src="/statics/front/images/article/slide-img1.jpg" alt="buttons image" />
        </div>
        <p class="pull-right column">
          <strong class="text-bold"><?php echo L('_new_materials_7');?></strong>
          <span class="text"><?php echo L('_new_materials_8');?></span>
        </p>
      </li>
      <li>
        <div class="pull-left column align-center">
          <img src="/statics/front/images/article/slide-img2.jpg" alt="buttons image" />
        </div>
        <p class="pull-right column">
          <strong class="text-bold"><?php echo L('_new_materials_9');?></strong>
          <span class="text"><?php echo L('_new_materials_10');?></span>
        </p>
      </li>
      <li>
        <div class="pull-left column align-center">
          <img src="/statics/front/images/article/slide-img3.jpg" alt="buttons image" />
        </div>
        <p class="pull-right column">
          <strong class="text-bold"><?php echo L('_new_materials_11');?></strong>
          <span class="text"><?php echo L('_new_materials_12');?></span>
        </p>
      </li>
      <li>
        <div class="pull-left column align-center">
          <img src="/statics/front/images/article/slide-img4.jpg" alt="buttons image" />
        </div>
        <p class="pull-right column">
          <strong class="text-bold"><?php echo L('_new_materials_13');?></strong>
          <span class="text"><?php echo L('_new_materials_14');?></span>
        </p>
      </li>
    </ul>
  </div>
</div>
<div class="clearfix main-width vertical-padding three-cols">
  <div class="pull-left column text-in-picture">
    <img src="/statics/front/images/article/materials02.jpg" alt="materials image" />
    <p class="text-bold"><?php echo L('_new_materials_15');?></p>
  </div>
  <dl class="pull-left column horizontal-padding article">
    <dt class="text-bold"><?php echo L('_new_materials_16');?></dt>
    <dd class="text"><?php echo L('_new_materials_17');?></dd>
  </dl>
  <div class="pull-right column text-in-picture">
    <img src="/statics/front/images/article/materials03.jpg" alt="materials image" />
    <p class="text-bold"><?php echo L('_new_materials_18');?></p>
  </div>
</div>
<div class="main-width align-center btm-row js-btm-row">
  <a href="<?php echo url('fitting');?>" class="pull-left text-bold" rel="nofollow">&lt; <?php echo L('_new_quality_3');?></a>
  <a href="<?php echo url(CATEGORY_URL_2093);?>" class="btn"><?php echo L('_new_quality_6');?></a>
  <a href="<?php echo url('quality');?>" class="pull-right text-bold" rel="nofollow"><?php echo L('_new_quality_1');?> &gt;</a>
</div>
<div class="fixed arrow-key js-arrow-key">
  <?php echo L('_new_quality_39');?> <img src="/statics/front/images/article/arrow-right.png" alt="arrow to right" /><?php echo L('_new_quality_40');?><img src="/statics/front/images/article/arrow-left.png" alt="arrow to left" /><?php echo L('_new_quality_41');?><img src="/statics/front/images/article/arrow-down.png" alt="arrow to down" /><?php echo L('_new_quality_42');?>
  <i class="close js-close">×</i>
</div>
<script src="/statics/front/js/scripts/article/common.js"></script>
<script src="/statics/front/js/scripts/slider.js"></script>
<?php include THEMES_PATH.'public/footer2.phtml'; ?>
<script>
$(function() {
  $('#animation').flexslider({
    animation: 'slide',
    direction: 'horizontal',
    easing: 'swing'
  });
  $(document).on('keyup', function(event) {
    var keyCode = event.which;
    if (keyCode === 39) {//向右的方向键
      window.location.href = "<?php echo url('quality');?>";
    }
  });
});
</script>
<?php include THEMES_PATH.'public/after_body.phtml';?>